<template>
  <!-- 电影列表容器 -->
  <div class="movie-list-container">
    <!-- 标题 -->
    <h2 class="section-title">电影列表</h2>
    <!-- 电影列表 -->
    <ul class="movie-list">
      <!-- 循环渲染每部电影 -->
      <li v-for="movie in movies" :key="movie.id" class="movie-item">
        <!-- 电影标题（点击查看详情） -->
        <span @click="viewMovieDetails(movie.id)" class="movie-title">
          {{ movie.title }} - {{ movie.year }}
        </span>
        <!-- 删除按钮 -->
        <button @click="deleteMovie(movie.id)" class="delete-button">
          删除
        </button>
      </li>
    </ul>
  </div>
</template>
<script setup>
// 引入 Vue 3 的核心 API
import { defineProps, defineEmits } from 'vue';
// 定义组件接收的 props
const props = defineProps({
  movies: {
    type: Array,
    required: true,
    description: '电影列表数据'
  }
});
// 定义组件触发的事件
const emits = defineEmits([
  'delete-movie', // 删除电影事件
  'view-movie-details' // 查看详情事件
]);
// 删除电影方法
const deleteMovie = (id) => {
  emits('delete-movie', id); // 触发删除事件
};
// 查看详情方法
const viewMovieDetails = (id) => {
  emits('view-movie-details', id); // 触发查看详情事件
};
</script>
<style scoped>
/* 容器样式 */
.movie-list-container {
  background-color: #f4f4f9;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 24px;
  margin-top: 24px;
}

/* 标题样式 */
.section-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

/* 列表样式 */
.movie-list {

  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* 列表项样式 */
.movie-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #e0e0e0;
  transition: background-color 0.3s ease;
}

.movie-item:hover {
  background-color: #e9e9f3;
}

/* 标题样式 */
.movie-title {
  cursor: pointer;
  color: #007bff;
  font-size: 16px;
}

.movie-title:hover {
  text-decoration: underline;
}

/* 删除按钮样式 */
.delete-button {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.delete-button:hover {
  background-color: #c82333;
}
</style>